<template>
  <div class="news-list-page">
    <!-- 操作按钮组 -->
    <div class="action-buttons">
      <el-button icon="Search" color='#7d2817'>搜索</el-button>
      <el-button type="success" icon="Plus" color="#7d2817" @click="openAddDialog">添加</el-button>
      <el-button type="danger" icon="Delete" color="#7d2817">删除</el-button>
      <el-button type="warning" icon="Top" color="#7d2817">置顶</el-button>
    </div>
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="title" label="标题" min-width="150" />
      <el-table-column prop="intro" label="介绍" min-width="200" />
      <el-table-column prop="viewCount" label="浏览量" width="80" />
      <el-table-column prop="interestCount" label="感兴趣" width="80" />
      <el-table-column prop="sort" label="排序" width="80" />
      <el-table-column prop="activityTime" label="活动时间" width="150" />
      <el-table-column prop="addTime" label="添加时间" width="180" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="text" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" :type="scope.row.isTop ? 'warning' : 'success'"
            @click="handleTop(scope.row.id, !scope.row.isTop)">
            {{ scope.row.isTop ? '取消置顶' : '置顶' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 引入封装的添加弹窗组件 -->
    <AddNewsDialog :visible="dialogVisible" :dialog-type="dialogType" :edit-data="editData"
      @closeDialog="dialogVisible = false" @saveData="handleSaveData" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import AddNewsDialog from '../../components/newsDialog.vue' // 引入封装的弹窗组件

// 模拟新闻列表数据
const tableData = ref([
  {
    id: 24,
    title: '比亚迪宋Pro配置曝光',
    intro: '比亚迪宋Pro配置曝光 智能配置又加码',
    viewCount: 73,
    interestCount: 2,
    sort: 9,
    activityTime: '',
    addTime: '2019-05-09 16:04:49',
    isTop: true,
  },
  {
    id: 20,
    title: '如何买车才能省钱又省心？',
    intro: '国六来了，如何买车才能省钱又省心？',
    viewCount: 516,
    interestCount: 5,
    sort: 0,
    activityTime: '2019.06.18 - 2019.06.28',
    addTime: '2019-05-09 13:51:49',
    isTop: true,
  },
  {
    id: 27,
    title: 'RDX精致豪华，雄心匹配',
    intro: '超大尺寸全景天窗',
    viewCount: 787,
    interestCount: 5,
    sort: 0,
    activityTime: '2020.04.13 - 2020.04.30',
    addTime: '2020-04-13 12:23:12',
    isTop: false,
  },
  {
    id: 26,
    title: '测试活动时间',
    intro: '测试活动时间',
    viewCount: 221,
    interestCount: 1,
    sort: 1,
    activityTime: '2019.06.18 - 2019.06.30',
    addTime: '2019-06-18 15:02:32',
    isTop: false,
  },
  {
    id: 25,
    title: '林肯航海家售39.88万',
    intro: '林肯航海家售39.88万 有限欲购从速',
    viewCount: 106,
    interestCount: 1,
    sort: 8,
    activityTime: '',
    addTime: '2019-05-09 16:07:16',
    isTop: false,
  },
  {
    id: 23,
    title: '长城1季度财报解读',
    intro: '不是以价换量这么简单 长城1季度财报解读',
    viewCount: 99,
    interestCount: 2,
    sort: 4,
    activityTime: '',
    addTime: '2019-05-09 13:59:46',
    isTop: false,
  },
])

// 弹窗相关
const dialogVisible = ref(false)
const dialogType = ref('add')
const editData = ref({})

// 打开添加弹窗
const openAddDialog = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
}

// 打开编辑弹窗
const openEditDialog = (row) => {
  dialogType.value = 'edit'
  editData.value = { ...row }
  dialogVisible.value = true
}

// 处理保存数据（添加或编辑）
const handleSaveData = (form) => {
  if (dialogType.value === 'add') {
    // 模拟添加，实际调接口后push到tableData
    form.id = Date.now()
    form.addTime = new Date().toLocaleString()
    form.isTop = false
    tableData.value.unshift(form)
  } else {
    // 模拟编辑，实际调接口后更新tableData
    const index = tableData.value.findIndex((item) => item.id === form.id)
    if (index !== -1) {
      tableData.value[index] = { ...form }
    }
  }
}

// 处理置顶
const handleTop = (id, isTop) => {
  const item = tableData.value.find((item) => item.id === id)
  if (item) {
    item.isTop = isTop
    ElMessage.success(`${isTop ? '置顶' : '取消置顶'}成功`)
  }
}
</script>

<style scoped>
.news-list-page {
  padding: 20px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.action-buttons .el-button {
  padding: 6px 12px;
}

.action-buttons .el-button--primary {
  background-color: #e53935;
  border-color: #e53935;
}

.action-buttons .el-button--primary:hover {
  background-color: #c62828;
  border-color: #c62828;
}
</style>